<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全部订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../../css/app.css" />-->
    <style>
        ol{margin: 0;padding: 0;list-style: none}
        .tab{display:flex;flex-direction: row;justify-content:space-between;align-items:center;margin-left: -2.5rem;height: 1.5rem}
        .tab li{ align-items: center;justify-content: center}
        .tab i{width: 100%;height: 2px;background: #2e97f5;position: absolute;bottom: -1.2rem;left: 0;display: none}
        .tab i.on{display: block}
        .active{color: #2e97f5}
        .listBox{display: flex;flex-direction: column;border-bottom: solid 1px #efefef;padding-bottom: 1rem}
        .listBox li{display: flex;flex-direction: row;justify-content: space-between;height: 2rem;align-items: center;margin-right: 1rem;margin-left: -1.2rem}
        .btnBox{display: flex;flex-direction: row;justify-content: flex-end;align-items: center;margin-top: -1rem}
        .btnBox li{padding: 0.3rem 0.5rem;border: solid 1px #CCCCCC; border-radius: 0.2rem;margin: 1rem;font-size: 0.6rem;margin-left: 0}
        .red{color: #e6524e}
        .btnBox li.green{color: #2e97f5;border: solid 1px #2e97f5}
        .btnBox li.gry{color: #666666;border: solid 1px #666666}
        .btnBox li.reded{color: #e6524e;border: solid 1px #e6524e}
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">订单</h1>
</header>
<div class="mui-content">
    <ul class="tab">
        <li style="text-align: center;flex:1;position: relative;border-right: solid 1px #efefef " class="active">全部订单<i class="on"></i></li>
        <li style="text-align: center;flex:1;position: relative;border-right: solid 1px #efefef ">待支付<i></i></li>
        <li style="text-align: center;flex:1;position: relative ">待评价<i></i></li>
    </ul>
    <div style="width: 100%;height: 1rem;background: #f5f5f5"></div>
    <div class="warper">
        <!--全部订单-->
        <div style="margin-bottom: 3rem">
            <div class="list">
                <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;height:4rem;border-bottom: solid 1px #efefef ">
                    <div style="height: 4rem;display: flex;align-items: flex-start;justify-content:center;flex-direction: column;margin-left: 1rem">
                        <div style="height: 2rem;display: flex;align-items: center;">订单标号：</div>
                        <div style="height:2rem;display: flex;align-items: center;">2017092302183914</div>
                    </div>
                    <div style="height: 4rem;display: flex;align-items: center;margin-right: 1rem">已完成</div>
                </div>
                <ul class="listBox">
                    <li>
                        <span>货物名称</span>
                        <span>喜之郎果冻</span>
                    </li>
                    <li>
                        <span>数量</span>
                        <span>100件</span>
                    </li>
                    <li>
                        <span>租赁时间</span>
                        <span>2222222222</span>
                    </li>
                    <li>
                        <span>仓库名称</span>
                        <span>北京三号仓库</span>
                    </li>
                    <li>
                        <span>租赁人</span>
                        <span>爱上一只狗</span>
                    </li>
                </ul>
                <ol class="btnBox">
                    <li>去评价</li>
                </ol>
                <div style="width: 100%;height: 1rem;background: #f5f5f5"></div>
            </div>
            <div class="list">
                <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;height:4rem;border-bottom: solid 1px #efefef ">
                    <div style="height: 4rem;display: flex;align-items: flex-start;justify-content:center;flex-direction: column;margin-left: 1rem">
                        <div style="height: 2rem;display: flex;align-items: center;">订单标号：</div>
                        <div style="height:2rem;display: flex;align-items: center;">2017092302183914</div>
                    </div>
                    <div style="height: 4rem;display: flex;align-items: center;margin-right: 1rem" class="red">待支付</div>
                </div>
                <ul class="listBox">
                    <li>
                        <span>货物名称</span>
                        <span>喜之郎果冻</span>
                    </li>
                    <li>
                        <span>数量</span>
                        <span>100件</span>
                    </li>
                    <li>
                        <span>租赁时间</span>
                        <span>2222222222</span>
                    </li>
                    <li>
                        <span>仓库名称</span>
                        <span>北京三号仓库</span>
                    </li>
                    <li>
                        <span>租赁人</span>
                        <span>爱上一只狗</span>
                    </li>
                </ul>
                <ol class="btnBox">
                    <li class="green">订单变更</li>
                    <li class="gray">取消订单</li>
                    <li class="reded">立即支付</li>
                </ol>
                <div style="width: 100%;height: 1rem;background: #f5f5f5"></div>
            </div>
        </div>
        <!--待支付-->
        <div style="margin-bottom: 3rem;display: none">
            <div class="list">
                <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;height:4rem;border-bottom: solid 1px #efefef ">
                    <div style="height: 4rem;display: flex;align-items: flex-start;justify-content:center;flex-direction: column;margin-left: 1rem">
                        <div style="height: 2rem;display: flex;align-items: center;">订单标号：</div>
                        <div style="height:2rem;display: flex;align-items: center;">2017092302183914</div>
                    </div>
                    <div style="height: 4rem;display: flex;align-items: center;margin-right: 1rem" class="red">待支付</div>
                </div>
                <ul class="listBox">
                    <li>
                        <span>货物名称</span>
                        <span>喜之郎果冻</span>
                    </li>
                    <li>
                        <span>数量</span>
                        <span>100件</span>
                    </li>
                    <li>
                        <span>租赁时间</span>
                        <span>2222222222</span>
                    </li>
                    <li>
                        <span>仓库名称</span>
                        <span>北京三号仓库</span>
                    </li>
                    <li>
                        <span>租赁人</span>
                        <span>爱上一只狗</span>
                    </li>
                </ul>
                <ol class="btnBox">
                    <li class="gray">取消订单</li>
                    <li class="reded">立即支付</li>
                </ol>
                <div style="width: 100%;height: 1rem;background: #f5f5f5"></div>
            </div>
            <div class="list">
                <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;height:4rem;border-bottom: solid 1px #efefef ">
                    <div style="height: 4rem;display: flex;align-items: flex-start;justify-content:center;flex-direction: column;margin-left: 1rem">
                        <div style="height: 2rem;display: flex;align-items: center;">订单标号：</div>
                        <div style="height:2rem;display: flex;align-items: center;">2017092302183914</div>
                    </div>
                    <div style="height: 4rem;display: flex;align-items: center;margin-right: 1rem" class="red">待支付</div>
                </div>
                <ul class="listBox">
                    <li>
                        <span>货物名称</span>
                        <span>喜之郎果冻</span>
                    </li>
                    <li>
                        <span>数量</span>
                        <span>100件</span>
                    </li>
                    <li>
                        <span>租赁时间</span>
                        <span>2222222222</span>
                    </li>
                    <li>
                        <span>仓库名称</span>
                        <span>北京三号仓库</span>
                    </li>
                    <li>
                        <span>租赁人</span>
                        <span>爱上一只狗</span>
                    </li>
                </ul>
                <ol class="btnBox">
                    <li class="gray">取消订单</li>
                    <li class="reded">立即支付</li>
                </ol>
                <div style="width: 100%;height: 1rem;background: #f5f5f5"></div>
            </div>
        </div>
        <!--待评价-->
        <div style="margin-bottom: 3rem;display: none">
            <div class="list">
                <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;height:4rem;border-bottom: solid 1px #efefef ">
                    <div style="height: 4rem;display: flex;align-items: flex-start;justify-content:center;flex-direction: column;margin-left: 1rem">
                        <div style="height: 2rem;display: flex;align-items: center;">订单标号：</div>
                        <div style="height:2rem;display: flex;align-items: center;">2017092302183914</div>
                    </div>
                    <div style="height: 4rem;display: flex;align-items: center;margin-right: 1rem">已完成</div>
                </div>
                <ul class="listBox">
                    <li>
                        <span>货物名称</span>
                        <span>喜之郎果冻</span>
                    </li>
                    <li>
                        <span>数量</span>
                        <span>100件</span>
                    </li>
                    <li>
                        <span>租赁时间</span>
                        <span>2222222222</span>
                    </li>
                    <li>
                        <span>仓库名称</span>
                        <span>北京三号仓库</span>
                    </li>
                    <li>
                        <span>租赁人</span>
                        <span>爱上一只狗</span>
                    </li>
                </ul>
                <ol class="btnBox">
                    <li>去评价</li>
                </ol>
                <div style="width: 100%;height: 1rem;background: #f5f5f5"></div>
            </div>
            <div class="list">
                <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;height:4rem;border-bottom: solid 1px #efefef ">
                    <div style="height: 4rem;display: flex;align-items: flex-start;justify-content:center;flex-direction: column;margin-left: 1rem">
                        <div style="height: 2rem;display: flex;align-items: center;">订单标号：</div>
                        <div style="height:2rem;display: flex;align-items: center;">2017092302183914</div>
                    </div>
                    <div style="height: 4rem;display: flex;align-items: center;margin-right: 1rem">已完成</div>
                </div>
                <ul class="listBox">
                    <li>
                        <span>货物名称</span>
                        <span>喜之郎果冻</span>
                    </li>
                    <li>
                        <span>数量</span>
                        <span>100件</span>
                    </li>
                    <li>
                        <span>租赁时间</span>
                        <span>2222222222</span>
                    </li>
                    <li>
                        <span>仓库名称</span>
                        <span>北京三号仓库</span>
                    </li>
                    <li>
                        <span>租赁人</span>
                        <span>爱上一只狗</span>
                    </li>
                </ul>
                <ol class="btnBox">
                    <li>去评价</li>
                </ol>
                <div style="width: 100%;height: 1rem;background: #f5f5f5"></div>
            </div>
        </div>
    </div>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item mui-active" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-compose"></span>
        <span class="mui-tab-label">订单</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
    </a>

</nav>
<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        $(".tab li").click(function () {
            $(".tab li i").removeClass("on");
            $(".tab li").removeClass("active");
            $(this).addClass("active");
            $(this).children().addClass("on");
            var oIndex = $(this).index();
            $(".warper>div").eq(oIndex).show().siblings().hide();
        })
    })
</script>
</body>
</html>
